<template>
  <view class="container">
    <!-- 年份输入区域 -->
    <view class="year-input-area" style="display: flex; align-items: center;">
      <span style="color: red; margin-right: 4rpx;">*</span>
      <input
        class="year-input"
        type="number"
        placeholder="出生年份（测试阶段：输入范围1949-1959）"
        v-model="inputYear"
        maxlength="4"
        placeholder-style="color: #ccc;"
      />
    </view>

    <!-- 文件上传区域 -->
    <view class="upload-area">
      <button class="upload-btn" type="primary" @click="chooseImage">上传图片</button>
    </view>

    <!-- 活动介绍文字 - 仅在未上传图片时显示 -->
    <view v-if="userImageUrl === ''">
      <text class="intro-text">活动介绍：先填写您的出生年份，然后上传一张您心仪的图片（竖图），上传后即可获得专属为祖国庆生的图片，然后选择一张您喜欢的图片去分享吧~</text>
    </view>

    <!-- 预览区域 -->
    <view class="preview-area" v-if="generatedImages.length > 0">
      <!-- 使用扑克牌堆叠效果展示所有图片 -->
      <view
        class="cards-stack"
        @touchstart="handleTouchStart"
        @touchend="handleTouchEnd"
      >
        <image
        v-for="(image, index) in generatedImages"
        :key="index"
        :src="image"
        mode="heightFix"
        style="max-width: 75%; min-height: 500rpx;"
        :class="['card-image', { 'active': index === currentWatermarkIndex }]"
        :style="getCardStyle(index)"
        @click="previewFullImage"
      ></image>
      </view>

      <!-- 轮播图排序点 -->
      <view class="carousel-dots" v-if="generatedImages.length > 1">
        <view
          v-for="(item, index) in generatedImages"
          :key="index"
          :class="['dot', { 'active': index === currentWatermarkIndex }]"
          @click="currentWatermarkIndex = index"
        ></view>
      </view>

      <!-- 提示文字 -->
      <view class="tip-text">图片可点击放大、左右滑动查看</view>

      <!-- 切换水印按钮 -->
      <view class="switch-buttons">
        <button class="switch-btn" @click="switchWatermarkText" v-if="generatedImages.length > 0">
          切换大事件
        </button>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="action-btn" @click="shareImage">去分享吧~</button>
      </view>
    </view>

    <!-- 隐藏的canvas用于绘制图片，同时设置标签属性和样式以确保像素准确 -->
    <!-- 使用Canvas 2D接口以支持同层渲染并提高性能 -->
    <canvas v-if="canvasWidth > 0" :id="'canvas_main'" type="2d" :width="canvasWidth" :height="canvasHeight" :style="canvasStyle"></canvas>



    <!-- 加载状态 - 使用微信小程序原生loading组件 -->
    <view class="loading-mask" v-if="loading">
      <view class="loading-content">
<!--        <loading type="spinner" color="#ff6700"></loading>-->
        <text class="loading-text">正在生成图片...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from "vue"
import {onShareAppMessage, onLoad, onShareTimeline} from "@dcloudio/uni-app"
import {request} from '@/utils/request'

// 响应式数据
const userImageUrl = ref('');
const generatedImages = ref([]); // 存储所有生成的带水印图片
const loading = ref(false);
const canvasStyle = ref({width: '0px', height: '0px', position: 'absolute', left: '-9999px'});
const canvasWidth = ref(0);
const canvasHeight = ref(0);

// 触摸事件相关数据
const touchStartX = ref(0);
const touchEndX = ref(0);

// 字体加载状态
const customFontFamily = 'fzyhjt'; // 自定义字体名称
const fontLoaded = ref(false); // 跟踪字体加载状态

// 加载远程字体并提供降级字体
const loadRemoteFont = async () => {
  try {
    await new Promise((resolve, reject) => {
      wx.loadFontFace({
        global: true,
        family: customFontFamily,
        source: `url(https://honor-hall.oss-cn-chengdu.aliyuncs.com/font/fzyhjt.ttf)`,
        success: () => {
          console.log('字体加载成功');
          fontLoaded.value = true;
          resolve();
        },
        fail: (err) => {
          console.error('字体加载失败:', err);
          fontLoaded.value = false;
          resolve(); // 即使加载失败也继续执行
        }
      });
    });
  } catch (error) {
    console.error('加载远程字体时发生错误:', error);
    fontLoaded.value = false;
  }
};

// 水印图片列表和当前选中的水印索引
const watermarkImages = [
  'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758854306021.png',
  'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758854279129.png',
  'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758854316940.png']

const currentWatermarkIndex = ref(0); // 当前显示的轮播图索引

// 水印文字相关数据
const watermarkTexts = ref([]); // 存储从远程接口获取的水印文字
const currentTextIndex = ref(0); // 当前选中的水印文字索引

// 用户输入的年份
const inputYear = ref('');

// 年份选择范围：1949-1959
const yearOptions = [];
for (let year = 1949; year <= 1959; year++) {
  yearOptions.push(year.toString());
}

// 处理年份选择变化
const onYearChange = (e) => {
  inputYear.value = yearOptions[e.detail.value];
}

// 引入设置分享功能的工具函数
import { wxSetUpShareFunction } from '@/utils/utils'

// 页面加载时设置分享菜单
onLoad(async () => {
  wxSetUpShareFunction('/package_games/pages/nationalDay')

  // 开始加载远程字体
  await loadRemoteFont();
})

// 获取分享图片URL（共用函数）
const getShareImageUrl = () => {
  return generatedImages.value.length > 0 ? generatedImages.value[currentWatermarkIndex.value] : watermarkImages[0];
};

// 获取当前显示的图片（共用函数）
const getCurrentDisplayImage = () => {
  // 对于低配置设备，可能只有一张生成的图片
  const currentIndex = isLowMemoryDevice() ? 0 : currentWatermarkIndex.value;
  return generatedImages.value[currentIndex];
};

// 分享给朋友
onShareAppMessage(() => {
  return {
    title: '锦绣中华 盛世华诞',
    path: `/package_games/pages/nationalDay`,
    imageUrl: getShareImageUrl()
  }
})

// 分享到朋友圈
onShareTimeline(() => {
  return {
    title: '锦绣中华 盛世华诞',
    query: `from=timeline`,
    imageUrl: getShareImageUrl()
  }
})

// 获取水印文字数据
const fetchWatermarkTexts = async (year) => {
  try {
    const response = await request({
      url: `/ht-nonrealtime-gameservice/milestone/detail?year=` + year,
      method: 'GET'
    });

    // 接口返回的数据结构是直接的字符串数组
    if (response && Array.isArray(response)) {
      watermarkTexts.value = response;
      // 随机选择一个初始水印文字
      if (watermarkTexts.value.length > 0) {
        currentTextIndex.value = Math.floor(Math.random() * watermarkTexts.value.length);
      }
    } else {
      // 如果接口返回格式不符合预期，不设置默认值
      watermarkTexts.value = [];
    }
  } catch (error) {
    console.error('获取水印文字失败:', error);
    // 出错时不设置默认值
    watermarkTexts.value = [];
  }
}

// 页面加载时初始化，不自动获取水印文字
onMounted(() => {
  // 不自动获取水印文字，等待用户输入年份
})

// 页面卸载时清理资源
onUnmounted(() => {
  cleanupResources();
});

// 压缩图片函数 - 使用微信原生API压缩，仅在用户上传图片且大小超过2MB时使用
const compressImage = async (filePath, maxSizeMB = 5) => {
  // 使用微信原生的图片压缩API
  return new Promise((resolve, reject) => {
    wx.compressImage({
      src: filePath, // 图片路径
      quality: 80, // 压缩质量，取值范围0-100
      success: (res) => {
        // 检查压缩后的文件大小
        wx.getFileInfo({
          filePath: res.tempFilePath,
          success: (fileInfo) => {
            const compressedSizeMB = fileInfo.size / (1024 * 1024);
            console.log(`压缩后文件大小: ${compressedSizeMB.toFixed(2)}MB`);

            // 如果一次压缩后仍超过大小限制，再次降低质量压缩
            if (compressedSizeMB > maxSizeMB) {
              wx.compressImage({
                src: res.tempFilePath,
                quality: 60, // 降低质量再次压缩
                success: (res2) => {
                  resolve(res2.tempFilePath);
                },
                fail: reject
              });
            } else {
              resolve(res.tempFilePath);
            }
          },
          fail: () => {
            // 获取文件大小失败，直接返回压缩后的图片
            resolve(res.tempFilePath);
          }
        });
      },
      fail: reject
    });
  });
};

// 选择图片
const chooseImage = () => {
  // 检查用户是否已输入年份
  if (!inputYear.value || !/^\d{4}$/.test(inputYear.value)) {
    uni.showToast({ title: '请先输入有效的4位数年份', icon: 'none' });
    return;
  }

  // 根据输入的年份获取水印文字
  fetchWatermarkTexts(inputYear.value).then(() => {
    uni.chooseImage({
      count: 1,
      sizeType: ['original'], // 使用原始图片
      sourceType: ['album', 'camera'],
      success: async (res) => {
        // 检查图片方向和基本信息
        const tempFilePath = res.tempFilePaths[0];

        try {
          // 获取图片信息
          const imageInfo = await new Promise((resolve, reject) => {
            uni.getImageInfo({ src: tempFilePath, success: resolve, fail: reject });
          });

          // 判断是否为竖图（高度大于宽度）
          if (imageInfo.height <= imageInfo.width) {
            uni.showToast({ title: '请上传竖版图片', icon: 'none' });
            return;
          }

          // 获取文件大小
          const fileInfo = await new Promise((resolve, reject) => {
            wx.getFileInfo({
              filePath: tempFilePath,
              success: resolve,
              fail: reject
            });
          });

          const fileSizeInMB = fileInfo.size / (1024 * 1024);
          const MAX_SIZE_MB = 5;
          
          // 判断文件大小，超过5MB则压缩
          if (fileSizeInMB > MAX_SIZE_MB) {
            // 需要压缩，使用微信原生API进行压缩处理
            const compressedFilePath = await compressImage(tempFilePath, MAX_SIZE_MB);
            userImageUrl.value = compressedFilePath;
          } else {
            // 不需要压缩，直接使用原图
            userImageUrl.value = tempFilePath;
          }

          // 清空之前生成的图片并开始生成新图片
          generatedImages.value = [];
          generateAllWatermarkImages();

        } catch (err) {
          console.error('处理图片信息失败', err);
          // 即使获取信息失败，也继续处理
          userImageUrl.value = tempFilePath;
          generatedImages.value = [];
          generateAllWatermarkImages();
        }
      },
      fail: (err) => {
        console.error('选择图片失败', err);
        uni.showToast({ title: '选择图片失败', icon: 'none' });
      }
    });
  }).catch(() => {
    // 如果获取水印文字失败，也阻止图片选择
    uni.showToast({ title: '获取水印文字失败，请重试', icon: 'none' });
  });

}

// 准备图片生成环境（共用函数）
const prepareImageGeneration = async () => {
  if (!userImageUrl.value) {
    uni.showToast({ title: '请先选择图片', icon: 'none' });
    return null;
  }

  // 先获取用户选择的图片信息（已经是压缩后的图片）
  const userImageInfo = await new Promise((resolve, reject) => {
    uni.getImageInfo({
      src: userImageUrl.value,
      success: resolve,
      fail: reject
    });
  });

  // 设置canvas尺寸与压缩后的图片一致，而不是原始尺寸
  // 这将显著提高大图片的处理速度
  const canvasWidthValue = userImageInfo.width;
  const canvasHeightValue = userImageInfo.height;

  canvasWidth.value = canvasWidthValue;
  canvasHeight.value = canvasHeightValue;

  // 动态设置canvas样式
  canvasStyle.value = {
    width: canvasWidthValue + 'px',
    height: canvasHeightValue + 'px',
    position: 'absolute',
    left: '-9999px'
  };

  // 等待DOM更新完成
  await new Promise(resolve => {
    setTimeout(resolve, 100);
  });

  return {
    userImageInfo,
    canvasWidthValue,
    canvasHeightValue
  };
}

// 生成当前选中的水印图片（仅生成一张，减少内存占用）
const generateCurrentWatermarkImage = async () => {
  if (!userImageUrl.value || currentWatermarkIndex.value >= watermarkImages.length) {
    return;
  }

  loading.value = true;

  try {
    // 准备图片生成环境
    const prepareResult = await prepareImageGeneration();
    if (!prepareResult) return;

    const { userImageInfo, canvasWidthValue, canvasHeightValue } = prepareResult;

    // 获取当前要生成的水印图片
    const watermarkImage = watermarkImages[currentWatermarkIndex.value];

    // 生成当前选中的图片
    const imagePath = await generateSingleWatermarkImage(
      userImageInfo,
      watermarkImage,
      canvasWidthValue,
      canvasHeightValue
    );

    // 清除之前的图片资源并释放内存
    cleanupResources();

    // 只保存当前生成的图片
    generatedImages.value = [imagePath];
    loading.value = false;
  } catch (error) {
    console.error('生成图片失败:', error);
    uni.showToast({ title: '生成图片失败', icon: 'none' });
    loading.value = false;
  }
}

// 生成所有水印图片 - 优化版本（生成完第一张后立即显示，后面两张生成好后按顺序添加）
const generateAllWatermarkImages = async () => {
  if (!userImageUrl.value) {
    uni.showToast({ title: '请先选择图片', icon: 'none' });
    return;
  }

  // 低配置设备优化：只生成当前选中的图片
  if (isLowMemoryDevice()) {
    return generateCurrentWatermarkImage();
  }

  // 高配置设备优化：先生成第一张图片并立即显示
  loading.value = true;

  try {
    // 准备图片生成环境
    const prepareResult = await prepareImageGeneration();
    if (!prepareResult) return;

    const { userImageInfo, canvasWidthValue, canvasHeightValue } = prepareResult;

    // 清空之前生成的图片
    generatedImages.value = [];

    // 串行生成图片，生成一张添加一张
    for (let index = 0; index < watermarkImages.length; index++) {
      const watermarkImage = watermarkImages[index];
      // 串行生成单张图片
      const imagePath = await generateSingleWatermarkImage(
        userImageInfo,
        watermarkImage,
        canvasWidthValue,
        canvasHeightValue
      );

      // 立即将生成的图片添加到数组中并显示
      generatedImages.value.push(imagePath);

      // 如果是第一张图片生成完成，立即设置为当前显示的图片并隐藏加载状态
      if (index === 0) {
        currentWatermarkIndex.value = 0;
        // 为了让DOM更新，添加一个小延迟
        await new Promise(resolve => setTimeout(resolve, 50));
        // 第一张图片生成完成并显示后隐藏加载状态
        loading.value = false;
      }
    }
  } catch (error) {
    console.error('生成图片失败:', error);
    uni.showToast({ title: '生成图片失败', icon: 'none' });
    loading.value = false;
  }
}

// 检测是否为低内存设备
const isLowMemoryDevice = () => {
  try {
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 假设内存小于2GB的设备为低配置设备
    // 注意：微信小程序API中没有直接获取内存的方法，这里使用设备型号和像素等信息进行估计
    const isLowEndModel = /^iPhone [5-8]|^Redmi|^vivo|^OPPO|^Samsung Galaxy [A-J]|^HUAWEI Y/.test(systemInfo.model);
    // 不根据屏幕宽度判断，确保所有设备都能显示轮播图效果

    // 添加开关，允许所有设备都显示轮播图
    // 如果需要对特定设备进行优化，可以调整下面的返回值
    const forceShowCarousel = true; // 设置为true强制显示轮播图，false则根据设备型号判断

    return forceShowCarousel ? false : isLowEndModel;
  } catch (e) {
    // 如果获取系统信息失败，默认按低配置设备处理
    return true;
  }
}

// 清理资源，释放内存
const cleanupResources = () => {
  try {
    // 清除生成的图片资源
    if (generatedImages.value && generatedImages.value.length > 0) {
      // 在小程序中，我们无法直接删除临时文件，但可以清空引用让垃圾回收器处理
      generatedImages.value = [];
    }

    // 重置canvas上下文（Canvas 2D方式）
    try {
      const query = uni.createSelectorQuery();
      query.select('#canvas_main')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          if (res && res[0] && res[0].node) {
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
          }
        });
    } catch (e) {
      // 如果Canvas 2D方式失败，尝试使用旧版方式
      const ctx = uni.createCanvasContext('canvas_main');
      ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
    }

    // 提示JavaScript引擎进行垃圾回收
    if (typeof global !== 'undefined' && typeof global.gc === 'function') {
      try {
        global.gc();
      } catch (e) {
        // 忽略gc调用失败的情况
      }
    }
  } catch (e) {
    console.error('清理资源失败:', e);
  }
}

// 生成单个带水印的图片
// 使用canvasWidth和canvasHeight参数名，更准确地反映这是压缩后的尺寸
const generateSingleWatermarkImage = async (userImageInfo, watermarkImageUrl, canvasWidth, canvasHeight) => {
  // 统一使用固定的canvasId，减少canvas实例数量
  const canvasId = 'canvas_main';

  try {
    // 获取Canvas 2D上下文
    const { canvas, ctx } = await new Promise((resolve, reject) => {
      const query = uni.createSelectorQuery();
      query.select('#' + canvasId)
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          if (res && res[0] && res[0].node) {
            const canvas = res[0].node;
            // 设置canvas的实际宽高
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            const ctx = canvas.getContext('2d');
            resolve({ canvas, ctx });
          } else {
            // 如果Canvas 2D获取失败，使用旧版API作为降级方案
            try {
              const ctx = uni.createCanvasContext(canvasId);
              resolve({ canvas: null, ctx });
            } catch (e) {
              reject(new Error('获取canvas上下文失败'));
            }
          }
        });
    });

    // 清空canvas
    if (ctx.clearRect) {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    }

    // 绘制用户选择的图片
    await new Promise((resolve) => {
      if (canvas && ctx.drawImage) {
        // Canvas 2D 方式：需要创建图像对象
        const image = canvas.createImage();
        image.onload = () => {
          ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
          resolve();
        };
        image.onerror = () => {
          console.error('加载用户图片失败');
          resolve();
        };
        image.src = userImageInfo.path;
      } else {
        // 降级方案：旧版API直接使用路径
        ctx.drawImage(userImageInfo.path, 0, 0, canvasWidth, canvasHeight);
        resolve();
      }
    });

    // 获取水印图片信息 - 在uni-app中使用uni.getImageInfo
    const watermarkImageInfo = await new Promise((resolve, reject) => {
      uni.getImageInfo({
        src: watermarkImageUrl,
        success: resolve,
        fail: (err) => {
          console.error('获取顶部水印图片失败:', err);
          // 如果获取失败，使用一个默认的空实现
          resolve({ width: 100, height: 100 });
        }
      });
    });

  // 获取当前选中的水印文字，确保使用从远程接口获取的值
  // 即使watermarkTexts有值，也要确保currentTextIndex索引有效
  let watermarkText = ''; // 不设置默认值
  if (watermarkTexts.value && watermarkTexts.value.length > 0) {
    // 确保currentTextIndex在有效范围内
    currentTextIndex.value = Math.min(currentTextIndex.value, watermarkTexts.value.length - 1);
    watermarkText = watermarkTexts.value[currentTextIndex.value] || '';
  }

  // 计算顶部图片水印的尺寸和位置
  let watermarkWidth = watermarkImageInfo.width;
  let watermarkHeight = watermarkImageInfo.height;
  let watermarkX;
  let watermarkY;

  // 计算水印图片尺寸和位置的共用函数
  const calculateWatermarkDimensions = (targetWidthRatio, maxHeightRatio, rightMarginRatio = 0, isCenter = false) => {
    const targetWidth = canvasWidth * targetWidthRatio;
    const scale = targetWidth / watermarkWidth;
    let calculatedHeight = watermarkHeight * scale;
    const maxHeight = canvasHeight * maxHeightRatio;

    if (calculatedHeight > maxHeight) {
      // 高度超过限制，按高度限制重新计算
      const heightScale = maxHeight / watermarkHeight;
      watermarkHeight = maxHeight;
      watermarkWidth = watermarkWidth * heightScale;
    } else {
      // 高度未超过限制，按原计算方式
      watermarkWidth = targetWidth;
      watermarkHeight = calculatedHeight;
    }

    if (isCenter) {
      watermarkX = (canvasWidth - watermarkWidth) / 2;
    } else {
      watermarkX = canvasWidth - watermarkWidth - (canvasWidth * rightMarginRatio);
    }
    watermarkY = canvasHeight * 0.04;
  };

  // 根据不同的图片URL设置不同的显示规则
  if (watermarkImageUrl === 'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758854306021.png') {
    // 第一张图片：离右边框距离8%，宽度为上传图片的35%，高度自适应，离顶部边框距离4%
    calculateWatermarkDimensions(0.35, 0.30, 0.08);
  } else if (watermarkImageUrl === 'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758854279129.png') {
    // 第二张图片：居中显示，高度自适应，宽度为上传图片的80%，离顶部边框距离4%
    calculateWatermarkDimensions(0.8, 0.25, 0, true);
  } else if (watermarkImageUrl === 'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758854316940.png') {
    // 第三张图片：离右边框距离5%，宽度为上传图片的60%，高度自适应，离顶部边框距离4%
    calculateWatermarkDimensions(0.6, 0.25, 0.05);
  } else {
    // 其他图片保持默认设置
    watermarkX = 0;
    watermarkY = 0;
  }

  // 绘制顶部图片水印 - 使用uni-app的drawImage API
  // 注意：在小程序中必须使用getImageInfo返回的path，而不是原始URL
  try {
    await new Promise((resolve) => {
      if (canvas && ctx.drawImage) {
        // Canvas 2D 方式：需要创建图像对象
        const image = canvas.createImage();
        image.onload = () => {
          ctx.drawImage(image, watermarkX, watermarkY, watermarkWidth, watermarkHeight);
          resolve();
        };
        image.onerror = () => {
          console.error('加载顶部水印图片失败');
          resolve();
        };
        image.src = watermarkImageInfo.path;
      } else {
        // 降级方案：旧版API直接使用路径
        ctx.drawImage(watermarkImageInfo.path, watermarkX, watermarkY, watermarkWidth, watermarkHeight);
        resolve();
      }
    });
  } catch (error) {
    console.error('绘制顶部水印图片失败:', error);
    // 绘制失败时使用一个灰色背景作为替代
    // 设置填充样式，适配Canvas 2D和旧版API
    if (ctx.setFillStyle) {
      ctx.setFillStyle('rgba(0, 0, 0, 0.1)');
    } else {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    }
    ctx.fillRect(watermarkX, watermarkY, watermarkWidth, watermarkHeight);
  }

  // 获取底部水印图片信息
  const bottomWatermarkImageInfo = await new Promise((resolve, reject) => {
    uni.getImageInfo({
      //src: 'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758854334241.png', // 同级目录下的bottom.png
      src: 'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758871328910.png', // 同级目录下的bottom.png
      //src: 'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758869250749.png', // 同级目录下的bottom.png
      success: resolve,
      fail: (err) => {
        console.error('获取底部水印图片失败:', err);
        // 如果获取失败，使用一个默认的空实现
      resolve({ width: canvasWidth, height: 100 });
    }
  });
});

// 计算底部水印图片的尺寸和位置
const bottomWatermarkWidth = canvasWidth; // 宽度与上传的图片保持一致
// 高度自适应（保持原始宽高比）
const bottomWatermarkHeight = (bottomWatermarkImageInfo.height / bottomWatermarkImageInfo.width) * bottomWatermarkWidth;
const bottomWatermarkX = 0;
const bottomWatermarkY = canvasHeight - bottomWatermarkHeight;

  // 绘制底部水印图片
  try {
    await new Promise((resolve) => {
      if (canvas && ctx.drawImage) {
        // Canvas 2D 方式：需要创建图像对象
        const image = canvas.createImage();
        image.onload = () => {
          ctx.drawImage(image, bottomWatermarkX, bottomWatermarkY, bottomWatermarkWidth, bottomWatermarkHeight);
          resolve();
        };
        image.onerror = () => {
          console.error('加载底部水印图片失败');
          resolve();
        };
        image.src = bottomWatermarkImageInfo.path;
      } else {
        // 降级方案：旧版API直接使用路径
        ctx.drawImage(bottomWatermarkImageInfo.path, bottomWatermarkX, bottomWatermarkY, bottomWatermarkWidth, bottomWatermarkHeight);
        resolve();
      }
    });
  } catch (error) {
    console.error('绘制底部水印图片失败:', error);
    // 绘制失败时使用一个灰色背景作为替代
    // 设置填充样式，适配Canvas 2D和旧版API
    if (ctx.setFillStyle) {
      ctx.setFillStyle('rgba(0, 0, 0, 0.1)');
    } else {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    }
    ctx.fillRect(bottomWatermarkX, bottomWatermarkY, bottomWatermarkWidth, bottomWatermarkHeight);
  }

  // 绘制水印文字 - 使用uni-app的文字API
  // 字体大小调整，增加基础字体大小，确保在高分辨率屏幕上清晰显示
  const baseFontSize = Math.max(12, canvasHeight * 0.025); // 增加字体大小基数
  const fontSize = baseFontSize;

  // 设置文字对齐方式，适配Canvas 2D和旧版API
  if (ctx.setTextAlign) {
    // 旧版API方式
    ctx.setTextAlign('left'); // 文字从左到右排列
  } else {
    // Canvas 2D方式
    ctx.textAlign = 'left';
  }

  // 水印文字区域与左边框的距离为10%
  // 水印文字的位置离顶部边框30%
  const topMarginPercentage = 0.3;
  const textOffsetY = canvasHeight * topMarginPercentage;

  // 计算字体大小
  const yearFontSize = fontSize * 1.4;
  // 第二行和第三行字体大小相同，都是第一行的60%
  const secondLineFontSize = yearFontSize * 0.6;
  const thirdLineFontSize = yearFontSize * 0.6;

  // 设置行高 - 垂直间距改为原来的一半
  const yearLineHeight = yearFontSize;
  const normalLineHeight = yearFontSize * 0.8;

  // 优化的多行文字处理函数 - 精确处理中文和数字宽度差异
  const drawMultilineText = (text, x, y, maxWidth, lineHeight) => {
    let currentY = y;
    let currentLine = '';
    let lineCount = 1; // 默认至少有一行

    // 对每个字符都精确测量宽度，确保中文和数字的换行长度一致
    for (let i = 0; i < text.length; i++) {
      const char = text[i];
      const testLine = currentLine + char;

      // 对每个字符都进行精确测量
      const metrics = ctx.measureText ? ctx.measureText(testLine) : { width: 0 };
      
      // 处理不同API的测量结果
      const textWidth = metrics.width || 0;

      // 增加一个安全系数，防止因为测量精度问题导致文字超出背景框
      const safeMaxWidth = maxWidth * 0.98;

      // 如果超过最大宽度，换行处理
      if (textWidth > safeMaxWidth && currentLine !== '') {
        // 一次性绘制一行，适配Canvas 2D和旧版API
        if (ctx.strokeText && ctx.fillText) {
          // Canvas 2D方式
          ctx.strokeText(currentLine, x, currentY);
          ctx.fillText(currentLine, x, currentY);
        } else if (ctx.fillText) {
          // 降级方案：只使用fillText（某些环境可能不支持strokeText）
          ctx.fillText(currentLine, x, currentY);
        }
        currentLine = char;
        currentY += lineHeight;
        lineCount++;
      } else {
        currentLine = testLine;
      }
    }

    // 绘制最后一行，适配Canvas 2D和旧版API
    if (ctx.strokeText && ctx.fillText) {
      // Canvas 2D方式
      ctx.strokeText(currentLine, x, currentY);
      ctx.fillText(currentLine, x, currentY);
    } else if (ctx.fillText) {
      // 降级方案：只使用fillText
      ctx.fillText(currentLine, x, currentY);
    }

    // 返回当前Y坐标和实际行数
    return {
      currentY,
      lineCount
    };
  };

  // 定义内边距大小（像素值）- 加大内边距
  const padding = yearFontSize * 0.75; // 使用字体大小的0.75倍作为内边距，加大内边距

  // 计算文本实际占用的行数
  const calculateTextLineCount = (text, maxWidth, lineHeight) => {
    let currentLine = '';
    let lineCount = 1; // 默认至少有一行

    // 模拟多行文本计算过程，但不实际绘制
    for (let i = 0; i < text.length; i++) {
      const char = text[i];
      const testLine = currentLine + char;

      // 对每个字符都进行精确测量
      const metrics = ctx.measureText ? ctx.measureText(testLine) : { width: 0 };
      
      // 处理不同API的测量结果
      const textWidth = metrics.width || 0;

      // 增加一个安全系数，防止因为测量精度问题导致文字超出背景框
      const safeMaxWidth = maxWidth * 0.98;

      // 如果超过最大宽度，换行处理
      if (textWidth > safeMaxWidth && currentLine !== '') {
        currentLine = char;
        lineCount++;
      } else {
        currentLine = testLine;
      }
    }

    return lineCount;
  };

  // 计算背景框尺寸 - 宽度为上传图片的40%
  const bgWidthPercentage = 0.4; // 宽为上传图片40%
  const bgWidth = canvasWidth * bgWidthPercentage;

  // 计算文字区域的宽度和位置（考虑内边距）
  const textAreaWidth = bgWidth - padding * 2; // 文字区域宽度 = 背景框宽度 - 左右内边距

  // 动态计算三行文字的实际行数
  const yearLineCount = calculateTextLineCount(inputYear.value + '年', textAreaWidth, yearLineHeight);
  const secondLineCount = calculateTextLineCount('我出生的那一年', textAreaWidth, normalLineHeight);
  const thirdLineCount = watermarkText ? calculateTextLineCount(watermarkText, textAreaWidth, normalLineHeight) : 0;

  // 计算总实际行数
  const totalActualLines = yearLineCount + secondLineCount + thirdLineCount;

  // 计算文字区域的高度
  const textAreaHeight = yearLineCount * yearLineHeight + 
                         (secondLineCount + thirdLineCount) * normalLineHeight;

  // 背景框高度 = 文字区域高度 + 上下内边距*2（增大内边距）
  const bgHeight = textAreaHeight + padding * 2;

  // 计算背景框位置 - 左侧边距为5%，顶部边距为25%
  const bgLeftMarginPercentage = 0.05; // 左边框的距离为5%
  const bgX = canvasWidth * bgLeftMarginPercentage;
  const bgY = textOffsetY - padding; // 向上移动padding像素，确保文字顶部有内边距

  // 计算文字区域的位置（考虑内边距）
  const textDrawX = bgX + padding; // 文字X位置 = 背景框X位置 + 左内边距
  const textDrawY = textOffsetY + yearFontSize; // 文字Y位置保持不变（已考虑顶部内边距）

  // 为文字区域添加远程图片背景
  // 保存当前上下文状态
  ctx.save();

  // 设置加强的阴影效果，适配Canvas 2D和旧版API
    if (ctx.setShadow) {
      // 旧版API方式
      ctx.setShadow(0, 0, 15, 'rgba(255, 255, 255, 0.6)'); // 设置15px的白色模糊阴影，加强阴影范围和不透明度
    } else {
      // Canvas 2D方式
      ctx.shadowColor = 'rgba(255, 255, 255, 0.6)';
      ctx.shadowBlur = 15;
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 0;
    }

  try {
    // 使用Promise封装图片加载
    await new Promise((resolve, reject) => {
      // 使用uni.getImageInfo加载远程图片
      uni.getImageInfo({
        src: 'https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758879668156.png',
        success: (res) => {
          // 绘制图片作为背景，保持原始宽高比并填充整个背景框
          if (canvas && ctx.drawImage) {
            // Canvas 2D 方式：需要创建图像对象
            const image = canvas.createImage();
            image.onload = () => {
              ctx.drawImage(image, bgX, bgY, bgWidth, bgHeight);
              resolve();
            };
            image.onerror = reject;
            image.src = res.path;
          } else {
            // 降级方案：旧版API直接使用路径
            ctx.drawImage(res.path, bgX, bgY, bgWidth, bgHeight);
            resolve();
          }
        },
        fail: reject
      });
    });
  } catch (error) {
    console.error('加载远程背景图片失败:', error);
    // 加载失败时使用白色半透明背景作为替代
    // 设置填充样式，适配Canvas 2D和旧版API
    if (ctx.setFillStyle) {
      ctx.setFillStyle('rgba(255, 255, 255, 0.5)');
    } else {
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    }
    ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
  }

  // 恢复上下文状态，避免影响后续绘制
  ctx.restore();

  // 绘制三行文字，支持超出换行
  // 第一行：用户输入的年份，加大40%、加粗、加'年'字
  // 设置字体大小和样式，适配Canvas 2D和旧版API
  if (ctx.setFontSize) {
    // 旧版API方式
    ctx.setFontSize(yearFontSize);
    // 旧版API设置字体粗细
    if (ctx.setBold) {
      ctx.setBold(true);
    }
    // 使用自定义字体或降级字体
    if (ctx.setFontFamily && fontLoaded.value) {
      ctx.setFontFamily(customFontFamily + ', sans-serif');
    }
  } else if (ctx.font) {
    // Canvas 2D方式
    // 使用自定义字体，增加后备字体
    const fontStr = fontLoaded.value 
      ? `bold ${yearFontSize}px "${customFontFamily}", sans-serif` 
      : `bold ${yearFontSize}px sans-serif`;
    ctx.font = fontStr;
    // 设置文字渲染质量
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
  }
  // 设置文字颜色和描边，增强显示效果
  if (ctx.setFillStyle) {
    // 旧版API方式
    ctx.setFillStyle('#ff0000'); // 第一行字体颜色为红色
    // 添加文字描边增强可读性
    if (ctx.setStrokeStyle) {
      ctx.setStrokeStyle('#ffffff');
      ctx.setLineWidth(1);
    }
  } else {
    // Canvas 2D方式
    ctx.fillStyle = '#ff0000';
    // 添加文字描边增强可读性
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = 1;
  }
  const yearResult = drawMultilineText(inputYear.value + '年', textDrawX, textDrawY, textAreaWidth, yearLineHeight);
  let currentTextY = yearResult.currentY;

  // 第二行：我出生的那一年，字体大小为第一行的60%
  // 设置字体大小和样式，适配Canvas 2D和旧版API
  if (ctx.setFontSize) {
    // 旧版API方式
    ctx.setFontSize(secondLineFontSize);
    // 恢复默认粗细
    if (ctx.setBold) {
      ctx.setBold(false);
    }
    // 使用自定义字体或降级字体
    if (ctx.setFontFamily && fontLoaded.value) {
      ctx.setFontFamily(customFontFamily + ', sans-serif');
    }
  } else if (ctx.font) {
    // Canvas 2D方式
    // 使用自定义字体，增加后备字体
    const fontStr = fontLoaded.value 
      ? `normal ${secondLineFontSize}px "${customFontFamily}", sans-serif` 
      : `normal ${secondLineFontSize}px sans-serif`;
    ctx.font = fontStr;
    // 设置文字渲染质量
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
  }

  // 设置文字颜色和描边，增强显示效果
  if (ctx.setFillStyle) {
    // 旧版API方式
    ctx.setFillStyle('#ff0000'); // 第二行字体颜色为红色
    // 添加文字描边增强可读性
    if (ctx.setStrokeStyle) {
      ctx.setStrokeStyle('#ffffff');
      ctx.setLineWidth(1);
    }
  } else {
    // Canvas 2D方式
    ctx.fillStyle = '#ff0000';
    // 添加文字描边增强可读性
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = 1;
  }
  const secondLineResult = drawMultilineText('我出生的那一年', textDrawX, currentTextY + normalLineHeight, textAreaWidth, normalLineHeight);
  currentTextY = secondLineResult.currentY;

  // 第三行：从远程接口获取的数据，只有当有值时才绘制，字体大小为第一行的60%
  if (watermarkText) {
    // 设置字体大小，适配Canvas 2D和旧版API
    if (ctx.setFontSize) {
      // 旧版API方式
      ctx.setFontSize(thirdLineFontSize);
    } else if (ctx.font) {
      // Canvas 2D方式
      // 注意：字体属性会在下面结合字体家族一起设置
      // 这里只设置大小，或者在下面统一设置
    }
    // 适配Canvas 2D和旧版API
    if (ctx.font) {
      // Canvas 2D标准方式
      const fontStr = fontLoaded.value 
        ? `normal ${thirdLineFontSize}px "${customFontFamily}", sans-serif` 
        : `normal ${thirdLineFontSize}px sans-serif`;
      ctx.font = fontStr;
      // 设置文字渲染质量
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = 'high';
    } else if (ctx.setFontFamily) {
      // 微信小程序旧版API
      if (fontLoaded.value) {
        ctx.setFontFamily = customFontFamily + ', sans-serif';
      }
    } else {
      // 降级方案：使用默认字体
      console.log('警告: 不支持的Canvas API，无法设置自定义字体');
    }
    // 设置文字颜色和描边，增强显示效果
    if (ctx.setFillStyle) {
      // 旧版API方式
      ctx.setFillStyle('#606266'); // 第三行字体颜色为深灰色
      // 添加文字描边增强可读性
      if (ctx.setStrokeStyle) {
        ctx.setStrokeStyle('#ffffff');
        ctx.setLineWidth(1);
      }
    } else {
      // Canvas 2D方式
      ctx.fillStyle = '#606266';
      // 添加文字描边增强可读性
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 1;
    }
    const thirdLineResult = drawMultilineText(watermarkText, textDrawX, currentTextY + normalLineHeight, textAreaWidth, normalLineHeight);
    currentTextY = thirdLineResult.currentY;
  }

  // 绘制完成后等待DOM更新（Canvas 2D不需要调用draw方法）
  if (!ctx.drawImage) {
    // 降级方案：使用旧版API
    await new Promise((resolve, reject) => {
      ctx.draw(false, resolve);
    });
  } else {
    // Canvas 2D方式直接resolve
    await new Promise(resolve => setTimeout(resolve, 100)); // 给点时间让绘制完成
  }

  // 导出图片时使用最高质量
  const tempFilePath = await new Promise((resolve, reject) => {
    if (canvas) {
      // 使用Canvas 2D方式导出图片
      uni.canvasToTempFilePath({
        canvas: canvas, // 使用canvas对象而非canvasId
        x: 0,
        y: 0,
        width: canvasWidth,
        height: canvasHeight,
        destWidth: canvasWidth, // 保持原始尺寸
        destHeight: canvasHeight,
        quality: 1.0, // 使用最高质量导出
        fileType: 'jpg',
        success: (res) => {
          resolve(res.tempFilePath);
        },
        fail: reject
      });
    } else {
      // 降级方案：使用旧版API
      uni.canvasToTempFilePath({
        canvasId: canvasId,
        x: 0,
        y: 0,
        width: canvasWidth,
        height: canvasHeight,
        destWidth: canvasWidth, // 保持原始尺寸
        destHeight: canvasHeight,
        quality: 1.0, // 使用最高质量导出
        fileType: 'jpg',
        success: (res) => {
          resolve(res.tempFilePath);
        },
        fail: reject
      });
    }
  });

  // 检查图片大小，如果超过5MB则使用wx.compressImage压缩
  const MAX_SIZE_MB = 5;
  const fileInfo = await new Promise((resolve, reject) => {
    wx.getFileInfo({
      filePath: tempFilePath,
      success: resolve,
      fail: reject
    });
  });

  const fileSizeInMB = fileInfo.size / (1024 * 1024);

  if (fileSizeInMB > MAX_SIZE_MB) {
    console.log(`生成的图片大小为 ${fileSizeInMB.toFixed(2)}MB，超过5MB，需要压缩`);
    // 使用wx.compressImage进行压缩
    const compressedFilePath = await compressImage(tempFilePath, MAX_SIZE_MB);
    return compressedFilePath;
  }

  return tempFilePath;
} catch (error) {
  console.error('生成带水印图片失败:', error);
  throw error;
}
}

// 切换水印文字
const switchWatermarkText = () => {
  if (watermarkTexts.value.length === 0 || loading.value) {
    return;
  }

  // 按顺序切换水印文字
  currentTextIndex.value = (currentTextIndex.value + 1) % watermarkTexts.value.length;

  // 重新生成图片
  if (userImageUrl.value) {
    if (isLowMemoryDevice()) {
      generateCurrentWatermarkImage();
    } else {
      generateAllWatermarkImages();
    }
  }
}

// 获取扑克牌样式 - 实现连成桶的循环效果
const getCardStyle = (index) => {
  const totalImages = generatedImages.value.length;

  // 当前选中的图片显示在最上层并居中
  if (index === currentWatermarkIndex.value) {
    return {
      zIndex: 10,
      transform: 'translateX(0) scale(1)',
      opacity: 1
    };
  }

  // 计算实际的位置差异，实现循环效果
  let diff = index - currentWatermarkIndex.value;
  // 如果diff大于一半，则从相反方向计算更短的距离（连成桶效果）
  if (diff > totalImages / 2) {
    diff = diff - totalImages;
  } else if (diff < -totalImages / 2) {
    diff = diff + totalImages;
  }

  // 计算偏移量和缩放比例
  const offset = 180 * diff; // 增大偏移量，使图片漏出更多
  const scale = 0.8; // 底部图片高度为中间图片的80%
  const opacity = Math.max(0.9 - Math.abs(diff) * 0.1, 0.7); // 增强底部图片的存在感

  // 根据diff的正负值调整层级，确保循环滑动时的层级关系正确
  let zIndex;
  if (diff > 0) {
    // 右侧图片层级较低
    zIndex = 10 - diff;
  } else {
    // 左侧图片层级较低
    zIndex = 10 + diff;
  }

  // 确保层级不小于1
  zIndex = Math.max(zIndex, 1);

  return {
    zIndex: zIndex,
    transform: `translateX(${offset}rpx) scale(${scale})`,
    opacity: opacity
  };
}



// 全屏预览图片
const previewFullImage = () => {
  if (generatedImages.value.length === 0) {
    uni.showToast({ title: '请先生成图片', icon: 'none' });
    return;
  }

  // 预览当前生成的图片
  // 对于低配置设备，可能只有一张生成的图片
  const currentIndex = isLowMemoryDevice() ? 0 : currentWatermarkIndex.value;
  uni.previewImage({
    urls: generatedImages.value,
    current: currentIndex,
    showmenu: true
  });
}

// 分享图片到微信朋友圈
const shareImage = () => {
  if (generatedImages.value.length === 0) {
    uni.showToast({ title: '请先生成图片', icon: 'none' });
    return;
  }

  // 获取当前显示的图片
  const currentImage = getCurrentDisplayImage();

  // #ifdef MP-WEIXIN
  try {

    wx.showShareImageMenu({
      path: currentImage, // 要分享的图片地址，必须为本地路径或临时路径
      success: () => {
        console.log('分享成功');
      },
      fail: (err) => {
        console.error('分享失败', err);
        // 显示更详细的错误信息给用户
        let errorMsg = '分享失败，请稍后重试';
        if (err.errMsg && err.errMsg.includes('network')) {
          errorMsg = '当前网络状态不佳，请检查网络后重试';
        } else if (err.errMsg && err.errMsg.includes('file')) {
          errorMsg = '图片文件异常，请重新生成图片后再试';
        }
        uni.showToast({ title: errorMsg, icon: 'none' });
      },
      complete: () => {
        // 分享完成后的回调，无论成功失败都会执行
        console.log('分享操作完成');
        // 强制重新渲染页面以解决黑屏问题
        setTimeout(() => {
          // 触发页面更新
          currentWatermarkIndex.value = currentWatermarkIndex.value;
        }, 100);
      }
    });
  } catch (error) {
    console.error('分享操作异常', error);
    uni.showToast({ title: '分享失败，请稍后重试', icon: 'none' });
  }
  // #endif
}



// 处理触摸开始事件
const handleTouchStart = (e) => {
  touchStartX.value = e.touches[0].clientX;
};

// 处理触摸结束事件 - 优化循环滑动效果
const handleTouchEnd = (e) => {
  if (generatedImages.value.length === 0 || loading.value) {
    return;
  }

  touchEndX.value = e.changedTouches[0].clientX;
  const diffX = touchEndX.value - touchStartX.value;
  const totalImages = generatedImages.value.length;

  // 判断滑动方向和距离，只有滑动超过50rpx才触发切换
  if (diffX < -50) {
    // 向左滑动，切换到下一张
    currentWatermarkIndex.value = (currentWatermarkIndex.value + 1) % totalImages;
  } else if (diffX > 50) {
    // 向右滑动，切换到上一张
    currentWatermarkIndex.value = (currentWatermarkIndex.value - 1 + totalImages) % totalImages;
  }
};

</script>

<style scoped lang="less">
.container {
  padding: 40rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
  background-image: url('https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1758797454246.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

/* 标题已移除 */

.upload-area {
  text-align: center;
  margin-bottom: 20rpx;
}

.intro-text {
  font-size: 20rpx;
  color: #FFFFFF;
  line-height: 1.6;
  text-align: justify;
}

.upload-btn {
  background-color: #ff6700;
  color: #fff;
  border-radius: 30rpx;
  font-size: 24rpx; /* 按钮变小 */
  padding: 16rpx 40rpx; /* 按钮变小 */
}

.preview-area {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.preview-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  text-align: center;
}

/* 扑克牌堆叠容器样式 */
.cards-stack {
  width: 100%;
  flex: 1;
  min-height: 400rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
  overflow: hidden; /* 隐藏超出容器的部分 */
  background-color: #f8f8f8; /* 添加背景色，避免显示透明区域 */
}

/* 单张扑克牌样式 */
.card-image {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx 5rpx rgba(240, 240, 240, 0.9); /* 灰白色外阴影，四周扩散 */
  box-sizing: border-box;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 减慢过渡速度 */
  transform-origin: center;
  cursor: pointer;
  will-change: transform, opacity; /* 优化动画性能 */
}

/* 当前激活的图片样式 */
.card-image.active {
  z-index: 10;
  transform: translateX(0) scale(1);
  width: 95%;
  height: 95%;
  box-shadow: 0 0 30rpx 8rpx rgba(240, 240, 240, 1); /* 灰白色外阴影，四周扩散，更明显 */
}

/* 点击效果 */
.card-image:active {
  transform: scale(0.98);
  transition: transform 0.2s ease;
}

/* 轮播图排序点样式 */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30rpx 0;
}

.dot {
  width: 60rpx;
  height: 12rpx;
  border-radius: 6rpx;
  background-color: #ddd;
  margin: 0 10rpx;
  transition: all 0.3s ease;
}

.dot.active {
  background-color: #ff6700;
  width: 80rpx;
}

/* 提示文字样式 */
.tip-text {
  text-align: center;
  font-size: 16rpx;
  color: #999;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}

/* 年份输入区域样式 */
.year-input-area {
  margin: 30rpx 0;
  padding: 0 40rpx;
}

.year-input {
  width: 100%;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 40rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  border: 1rpx solid #eee;
}


.switch-buttons {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.switch-btn {
  background-color: rgba(255, 103, 0, 0.8);
  color: white;
  border-radius: 30rpx;
  padding: 16rpx 30rpx; /* 按钮变小 */
  font-size: 24rpx; /* 按钮变小 */
  border: none;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  width: 45%;
}

.switch-btn:active {
  background-color: rgba(255, 103, 0, 1);
  transform: scale(0.95);
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx; /* 增加底部边距，确保按钮不被遮挡 */
}

.action-btn {
  flex: 1;
  margin: 0 10rpx;
  font-size: 24rpx; /* 按钮变小 */
  padding: 16rpx; /* 按钮变小 */
}

.action-btn:first-child {
  background-color: #ff6700;
  color: #fff;
}

.action-btn:last-child {
  background-color: #fff;
  color: #ff6700;
  border: 1rpx solid #ff6700;
}

/* 加载状态 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-content {
  background-color: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333;
}
</style>
